<template>
	<div class="p-4">
		<BasicTable @register="registerTable" @edit-change="onEditChange">
			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'action'">
					<TableAction :actions="createActions(record, column)" />
				</template>
			</template>
		</BasicTable>
	</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicTable, TableAction } from '#/components';
import { demoListApi } from '@/api/demo/table';
import { cloneDeep } from 'lodash-es';
import { useMessage } from '@/hooks/web/useMessage';
import { ActionItem, BasicColumn, EditRecordRow } from '#/types';
import { getBigTypes, getPrincipaltree } from '@/api/demo';
import { useTable } from '#/hooks';

const columns: BasicColumn[] = [
	{
		title: '输入框',
		dataIndex: 'name',
		editRow: true,
		editComponentProps: {
			prefix: '$',
		},
		width: 150,
	},
	{
		title: '默认输入状态',
		dataIndex: 'name7',
		editRow: true,
		width: 150,
	},
	{
		title: '输入框校验',
		dataIndex: 'name1',
		editRow: true,
		align: 'left',
		// 默认必填校验
		editRule: true,
		width: 150,
	},
	{
		title: '输入框函数校验',
		dataIndex: 'name2',
		editRow: true,
		align: 'right',
		editRule: async text => {
			if (text === '2') {
				return '不能输入该值';
			}
			return '';
		},
	},
	{
		title: '数字输入框',
		dataIndex: 'id',
		editRow: true,
		editRule: true,
		editComponent: 'InputNumber',
		width: 150,
	},
	{
		title: '下拉框',
		dataIndex: 'name3',
		editRow: true,
		editComponent: 'Select',
		editComponentProps: {
			options: [
				{
					label: 'Option1',
					value: '1',
				},
				{
					label: 'Option2',
					value: '2',
				},
				{
					label: 'Option3',
					value: '3',
				},
			],
		},
		width: 200,
	},
	{
		title: '远程下拉',
		dataIndex: 'name4',
		editRow: true,
		editComponent: 'ApiSelect',
		editComponentProps: {
			api: getBigTypes,
			resultField: 'list',
			labelField: 'name',
			valueField: 'id',
		},
		width: 200,
	},
	{
		title: '远程下拉树',
		dataIndex: 'name8',
		editRow: true,
		editComponent: 'ApiTreeSelect',
		editRule: false,
		editComponentProps: {
			api: getPrincipaltree,
			resultField: 'data',
			fieldNames: { label: 'name', key: 'deptId', value: 'name' },
		},
		width: 200,
	},
	{
		title: '日期选择',
		dataIndex: 'date',
		editRow: true,
		editComponent: 'DatePicker',
		editComponentProps: {
			valueFormat: 'YYYY-MM-DD',
			format: 'YYYY-MM-DD',
		},
		width: 150,
	},
	{
		title: '时间选择',
		dataIndex: 'time',
		editRow: true,
		editComponent: 'TimePicker',
		editComponentProps: {
			valueFormat: 'HH:mm',
			format: 'HH:mm',
		},
		width: 100,
	},
	{
		title: '勾选框',
		dataIndex: 'name5',
		editRow: true,

		editComponent: 'Checkbox',
		editValueMap: value => {
			return value ? '是' : '否';
		},
		width: 100,
	},
	{
		title: '开关',
		dataIndex: 'name6',
		editRow: true,
		editComponent: 'Switch',
		editValueMap: value => {
			return value ? '开' : '关';
		},
		width: 100,
	},
];
export default defineComponent({
	components: { BasicTable, TableAction },
	setup() {
		const { createMessage: msg } = useMessage();
		const currentEditKeyRef = ref('');
		const [registerTable] = useTable({
			title: '可编辑行示例',
			titleHelpMessage: ['本例中修改[数字输入框]这一列时，同一行的[远程下拉]列的当前编辑数据也会同步发生改变'],
			api: demoListApi,
			columns: columns,
			showIndexColumn: false,
			showTableSetting: true,
			tableSetting: { fullScreen: true },
			actionColumn: {
				width: 160,
				title: 'Action',
				dataIndex: 'action',
			},
		});

		function handleEdit(record: EditRecordRow) {
			currentEditKeyRef.value = record.key;
			record.onEdit?.(true);
		}

		function handleCancel(record: EditRecordRow) {
			currentEditKeyRef.value = '';
			record.onEdit?.(false, false);
		}

		async function handleSave(record: EditRecordRow) {
			// 校验
			msg.loading({ content: '正在保存...', duration: 0, key: 'saving' });
			const valid = await record.onValid?.();
			if (valid) {
				try {
					const data = cloneDeep(record.editValueRefs);
					console.log(data);
					//TODO 此处将数据提交给服务器保存
					// ...
					// 保存之后提交编辑状态
					const pass = await record.onEdit?.(false, true);
					if (pass) {
						currentEditKeyRef.value = '';
					}
					msg.success({ content: '数据已保存', key: 'saving' });
				} catch (error) {
					msg.error({ content: '保存失败', key: 'saving' });
				}
			} else {
				msg.error({ content: '请填写正确的数据', key: 'saving' });
			}
		}

		function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
			if (!record.editable) {
				return [
					{
						title: '编辑',
						disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
						onClick: handleEdit.bind(null, record),
					},
				];
			}
			return [
				{
					title: '保存',
					onClick: handleSave.bind(null, record, column),
				},
				{
					title: '取消',
					popConfirm: {
						title: '是否取消编辑',
						confirm: handleCancel.bind(null, record, column),
					},
				},
			];
		}

		function onEditChange({ column, value, record }) {
			// 本例
			if (column.dataIndex === 'id') {
				record.editValueRefs.name4.value = `${value}`;
			}
			console.log(column, value, record);
		}

		return {
			registerTable,
			handleEdit,
			createActions,
			onEditChange,
		};
	},
});
</script>
